<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div.red{height: 50px;
	                width: 50px;
	                margin: 0 auto;
	                padding: 0;
	                background: red;
	}
		</style>
	</head>
	<body>
	
		<div class="red"></div>
		<script src="js/jquery-1.12.4.min.js">
			
		</script>
		<script type="text/javascript">
			var red=$('.red');
			
     $(document).keydown(
     	function(){
     			var opt=event.which;
			var left=red.offset().left;
			var top=red.offset().top;	
     		switch(opt){
     			case 37:
     			red.offset({
     				top:top,
     				left:left-10
     			});
     			break;
     			case 38:
     			red.offset({
     				top:top-10,
     				left:left
     			});
     			break;
     			case 39:
     			red.offset({
     				top:top,
     				left:left+10
     			});
     			break;
     			case 40:
     			red.offset({
     				top:top+10,
     				left:left
     			});
     			break;
     			default:
     			break;
     		}
     	});

			
		</script>
	</body>
</html>
